<!--  -->
<template>
  <div>
    <dl class="m-dl m-hot-city">
      <dt>热门城市:</dt>
      <dd
        v-for="item of hotCity"
        :key='item.id'
      >
        <nuxt-link to='/my'>{{item.name !== "市辖区"?item.name:item.province}}</nuxt-link>
      </dd>
    </dl>
    <dl class="m-dl">
      <dt>最近访问:</dt>
      <dd
        v-for="(item,index2) of visitor"
        :key='index2'
      >
        <nuxt-link to='/my'>{{item}}</nuxt-link>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotCity: [],
      visitor: ["北京", "安顺", "上海"]
    };
  },

  components: {},

  computed: {},
  async mounted() {
    let {
      status,
      data: { hots }
    } = await this.$axios.get(
      `http://cp-tools.cn/geo/hotCity?sign=2887e552643c295f7301096e12134e8d`
    );
    if (status === 200) {
      this.hotCity = hots;
    } else {
      this.hotCity = [];
    }
  },

  methods: {}
};
</script>
<style lang='scss' scoped>
.m-dl {
  line-height: 80px;
  height: 80px;
  a {
    font-size: 14px;
    color: #666;
    margin: 0 20px;
    &:hover {
      color: #13d1be;
    }
  }

  // padding-bottom: 30px;
  border-bottom: 1px solid #e5e5e5;
  & > * {
    float: left;
  }
}
</style>
